import React from 'react';
import { Spin, Tag, Row, Col } from 'antd';
import { FileTextOutlined } from '@ant-design/icons';
import styles from '../Submit.module.css';
import {
  SUBMISSION_STATUS,
  STATUS_TEXT,
  STATUS_COLOR,
  CASE_RESULT_TAG,
  CASE_RESULT_BG_COLOR,
  CASE_RESULT_TEXT_COLOR,
  formatMemoryMB
} from '@/utils/mappings';

interface SubmissionResultProps {
  submissionResult: any;
  submitting: boolean;
  resultActiveTab: string;
}

const SubmissionResult: React.FC<SubmissionResultProps> = ({
  submissionResult,
  submitting,
  resultActiveTab
}) => {
  if (submitting && resultActiveTab === 'submissionResult' && !submissionResult) {
    return (
      <div className={styles.loadingContainer}>
        <Spin>
          <div className={styles.loadingPlaceholder} style={{ minHeight: '100px' }} />
        </Spin>
      </div>
    );
  }
  
  if (submissionResult) {
    // 使用状态码获取对应的文字和颜色
    const resultCode = (submissionResult as any).result;
    const statusText = resultCode !== undefined ? STATUS_TEXT[resultCode] : '未知状态';
    const statusColor = resultCode !== undefined ? STATUS_COLOR[resultCode] : 'default';
    
    // 判断是否正在评测中
    const isPending = resultCode === SUBMISSION_STATUS.PENDING || resultCode === SUBMISSION_STATUS.JUDGING;

    // 获取测试点数据
    const testCases = (submissionResult as any).info?.data || [];
    
    return (
      <div className={styles.submissionResultContent}>
        <div className={styles.resultHeader}>
          <Tag color={statusColor}>
            {statusText} {isPending && <span className={styles.loadingDot}>...</span>}
          </Tag>
          {(submissionResult as any).score !== undefined && (
            <span className={styles.scoreLabel}>
              分数: <span className={styles.scoreValue}>{(submissionResult as any).score}</span>
            </span>
          )}
        </div>
        
        {/* 测试点结果显示区域 */}
        {testCases.length > 0 && (
          <div className={styles.testCasesContainer} style={{ margin: '16px 0' }}>
            <Row gutter={[12, 12]}>
              {testCases.map((testCase: any, index: number) => {
                const caseResult = testCase.result;
                const bgColor = CASE_RESULT_BG_COLOR[caseResult] || '#d9d9d9';
                const textColor = CASE_RESULT_TEXT_COLOR[caseResult] || '#000000';
                const resultTag = CASE_RESULT_TAG[caseResult] || '?';
                
                // 格式化内存显示
                const memoryStr = formatMemoryMB(testCase.memory);
                
                return (
                  <Col span={4} key={testCase.test_case || index}>
                    <div 
                      style={{
                        backgroundColor: bgColor,
                        color: textColor,
                        padding: '12px',
                        borderRadius: '4px',
                        textAlign: 'center',
                        position: 'relative',
                        height: '100px',
                        width: '100px',
                        margin: '0 auto',
                        display: 'flex',
                        flexDirection: 'column',
                        justifyContent: 'center',
                        alignItems: 'center',
                        boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
                      }}
                    >
                      <div style={{ 
                        position: 'absolute', 
                        top: '4px', 
                        left: '4px', 
                        fontSize: '12px', 
                        fontWeight: 'bold' 
                      }}>
                        #{testCase.test_case || index + 1}
                      </div>
                      <div style={{ 
                        fontSize: '24px', 
                        fontWeight: 'bold',
                        marginBottom: '4px'
                      }}>
                        {resultTag}
                      </div>
                      <div style={{ fontSize: '12px' }}>
                        {testCase.real_time}ms/{memoryStr}
                      </div>
                    </div>
                  </Col>
                );
              })}
            </Row>
          </div>
        )}
        
        {/* 额外信息显示 */}
        {(submissionResult as any).info && 
          (submissionResult as any).info.err && 
          (
            <div className={styles.errorInfo} style={{ margin: '16px 0' }}>
              <pre>{(submissionResult as any).info.err}</pre>
            </div>
          )
        }
        
        {/* 提交时间和执行信息放到最后 */}
        <div className={styles.resultDetails} style={{ marginTop: '16px', borderTop: '1px solid #f0f0f0', paddingTop: '16px' }}>
          <div className={styles.resultItem}>
            <span className={styles.resultLabel}>提交时间:</span>
            <span>{(submissionResult as any).create_time || '未知'}</span>
          </div>
          {!isPending && (
            <>
              <div className={styles.resultItem}>
                <span className={styles.resultLabel}>执行时间:</span>
                <span>{(submissionResult as any).statistic_info?.time_cost || '0'} ms</span>
              </div>
              <div className={styles.resultItem}>
                <span className={styles.resultLabel}>内存消耗:</span>
                <span>{formatMemoryMB((submissionResult as any).statistic_info?.memory_cost)}</span>
              </div>
            </>
          )}
        </div>
      </div>
    );
  }
  
  return (
    <div className={styles.emptyResult}>
      <FileTextOutlined className={styles.emptyIcon} />
      <p>点击"提交"按钮提交你的代码</p>
    </div>
  );
};

export default SubmissionResult; 